<link rel="stylesheet" href="./qfui.css" />
<div id="root">
  <!-- 导航 -->
  <qf-nav-bar title="千锋UI组件库"></qf-nav-bar>
  <!-- 导航 -->

  <br />
  <hr />
  <br />

  <!-- loading1 -->
  <button @click="status1 = !status1">显示loading</button>
  <qf-loading1 v-show="status1"></qf-loading1>
  <!-- loading1 -->

  <br />
  <br />
  <br />
  <hr />
  <br />

  <!-- loading2 全局loading-->
  <button @click="status2 = true">显示全局loading</button>
  <qf-loading2 v-show="status2" @close="status2 = false"></qf-loading2>
  <!-- loading2 -->

  <br />
  <br />
  <br />
  <hr />
  <br />

  <!-- qfDialog 对话框-->
  <button @click="status3=true">显示对话框dialog</button>
  <qf-dialog v-show="status3" @close="status3=false"></qf-dialog>
  <!-- qfDialog -->
  <br />
  <br />
  <br />
  <hr />
  <br />

  <!-- qfDialog -->
  <button @click="status4=true">显示对话框dialog2</button>
  <qf-dialog2 :visible.sync="status4"></qf-dialog2>
  <!-- <qf-dialog2
    :visible="status4" 
    @update:visible="data => status4=data"
  ></qf-dialog2> -->
  <!-- qfDialog -->

  <br />
  <br />
  <br />
  <hr />
  <br />

  <!-- qfPage -->
  <qf-page :total="50" :pagesize="5" @change-page="changePageFn"></qf-page>
  <!-- qfPage -->
</div>
<script src="http://unpkg.zhimg.com/vue@2.6.14"></script>
<script src="./qfui.js"></script>
<script>
  const vm = new Vue({
    el: "#root",
    data: {
      status1: false,
      status2: false,
      status3: false,
      status4: false,
    },
    methods: {
      changePageFn(pagenum) {
        console.log(pagenum);
      },
    },
  });
</script>
